import React from 'react';
import { Avatar, Table } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { useParams } from "react-router-dom";
import { useEffect, useState } from 'react'
import axios from 'axios';
const StudentList = () => {
    let { id } = useParams(); // 使用useParams hook获取URL参数中的id
    const [studentData, setstudentData] = useState(null);
    useEffect(() => {
        const courseid = id;    
        axios.post('http://localhost:8000/getstudents', { courseid: courseid })
        .then(response => {
          // 处理从后端返回的数据
          console.log(response.data);
          setstudentData(response.data);
        })
        .catch(error => {
          console.error('Error:', error);
        });
      }, []);
  const columns = [
    {
      title: '学号',
      dataIndex: 'studentid',
      width: 120
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      render: avatar => <Avatar size={48} src={avatar ? `http://localhost:8000/${avatar}` : undefined} icon={!avatar && <UserOutlined />} />
    },
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '年级',
      dataIndex: 'grade'
    },
    {
      title: '班级',
      dataIndex: 'class'
    },
    {
      title: '专业',
      dataIndex: 'major'
    },
  ];

  return (
    <>
      <Table
        rowKey="id"
        columns={columns}
        dataSource={studentData}
        pagination={false} // 去除页码
        scroll={{ x: 1000 }} // 设置宽度
      />
    </>
  );
};

export default StudentList;
